<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        <style>#app {
            font-family: Arial, sans-serif;
            width: 300px;
            margin: 0 auto;
        }

        .todo-input {
            width: calc(100% - 22px);
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        .add-button {
            width: 100%;
            padding: 10px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .add-button:hover {
            background-color: #218838;
        }

        .todo-list {
            list-style-type: none;
            padding: 0;
        }

        .todo-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-bottom: 5px;
        }

        .checkbox {
            margin-right: 10px;
        }

        .completed {
            text-decoration: line-through;
            color: #888;
        }

        .delete-button {
            background-color: #dc3545;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .delete-button:hover {
            background-color: #c82333;
        }

        .filter-buttons {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }

        .filter-buttons button {
            padding: 10px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            flex: 1;
            margin: 0 2px;
        }

        .filter-buttons button.active {
            background-color: #0056b3;
        }

        .filter-buttons button:hover {
            background-color: #0056b3;
        }
    </style>
    </style>
</head>

<body>
    <div id="app">
        <!-- 添加待办事项的输入框和按钮 -->
        <input v-model="newTodo" placeholder="添加待办事项" class="todo-input">
        <button @click="addTodo(newTodo)" class="add-button">添加</button>
        <!-- 待办事项列表显示 -->
        <ul class="todo-list">
            <li v-for="todo in filteredTodos" :key="todo.id" class="todo-item">
                <input type="checkbox" v-model="todo.completed" class="checkbox">
                <span :class="{ 'completed': todo.completed }">
                    {{ todo.text }}
                </span>
                <button @click="removeTodo(todo.id)" class="delete-button">删除</button>
            </li>
        </ul>
        <!-- 过滤待办事项的按钮 -->
        <div class="filter-buttons">
            <button @click="filter = 'all'" :class="{ 'active': filter === 'all' }">全部</button>
            <button @click="filter = 'active'" :class="{ 'active': filter === 'active' }">活动中</button>
            <button @click="filter = 'completed'" :class="{ 'active': filter === 'completed' }">已完成</button>
        </div>
    </div>
    <script>
        const { createApp, ref, watch, computed } = Vue;
        createApp({
            setup() {
                // 从本地存储加载待办事项
                const savedTodos = localStorage.getItem('todos');
                const todos = ref(savedTodos ? JSON.parse(savedTodos) : []);
                // 新待办事项的文本
                const newTodo = ref('');
                const filter = ref('all');
                // 添加待办事项
                const addTodo = () => {
                    if (newTodo.value.trim()) {
                        todos.value.push({
                            id: Date.now(),
                            text: newTodo.value.trim(),
                            completed: false
                        });
                        newTodo.value = ''; // 清空输入框
                    }
                };
                // 删除待办事项
                const removeTodo = (todoId) => {
                    todos.value = todos.value.filter(todo => todo.id !== todoId);
                };
                // 计算属性，根据过滤条件返回过滤后的待办事项列表
                const filteredTodos = computed(() => {
                    switch (filter.value) {
                        case 'active':
                            return todos.value.filter(todo => !todo.completed);
                        case 'completed': return todos.value.filter(todo => todo.completed);
                        default:
                            return todos.value;
                    }
                });
                // 监听 todos 的变化并保存到本地存储
                watch(todos, (newTodos) => {
                    localStorage.setItem('todos',
                        JSON.stringify(newTodos));
                }, { deep: true });
                return {
                    todos, newTodo, filter, addTodo, removeTodo,
                    filteredTodos
                };
            }
        }).mount('#app'); 
    </script>
</body>

</html>